<template>
  <div>
    <Row :gutter="3" style="margin-top:10px">
      <i-col :md="8" :lg="8" :xl="8">
        <Card shadow style="height:1265px">
        <div style="display:block;margin-bottom:10px"><span style="font-weight:bold;">人员名称:</span></div>
        <AutoComplete
            v-model="value1"
            :data="searchData"
            @on-search="handleSearch1"
            placeholder="输入人员名称"
            style="width:200px;display:block;mairgin-top:10px;">
          </AutoComplete>
          <Table border :columns="columns1" :data="data1" :height="450" style="margin-top:10px"></Table>
          <Page :total="100" show-total style="margin-top:10px"/>
        </Card>
      </i-col>
      <i-col :md="16" :lg="16" :xl="16">
        <Card shadow>
          <v-chart :options="pie" @click="pieClicked" style="height:600px"/>
        </Card>
         <Card shadow>
          <v-chart :options="pie" @click="pieClicked" style="height:600px"/>
        </Card>
      </i-col>
    </Row>
    <Row style="margin-top:20px">
      <Card>
        <trend-line :data=trendData :options=trendLineOptions></trend-line>
      </Card>
    </Row>
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import TrendLine from '_c/trend-line'
import { ChartPie, ChartBar } from '_c/charts'
import ECharts from 'vue-echarts'
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    TrendLine,
    ChartPie,
    ChartBar,
    'v-chart': ECharts
  },
  data () {
    return {
      value1: '',
      searchData: [],
      pie: {
        title: {
          text: '芒市支行机构画像',
          subtext: '9月份',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          show: true,
          orient: 'vertical',
          left: 'right',
          data: ['优秀', '良好', '一般', '关注', '重点关注']
        },
        series: [
          {
            name: '画像数据',
            type: 'pie',
            radius: '65%',
            center: ['50%', '60%'],
            data: [
              { value: 335, name: '优秀' },
              { value: 310, name: '良好' },
              { value: 234, name: '一般' },
              { value: 135, name: '关注' },
              { value: 148, name: '重点关注' }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        color: [
          '#91c7ae',
          '#61a0a8',
          '#2f4545',
          '#d48265',
          '#c23531'
        ]
      },
      columns1: [
        {
          title: '业务ID',
          key: 'id',
          width: 80
        },
        {
          title: '业务名称',
          key: 'name'
        }
      ],
      data1: [
        {
          id: 1,
          name: '芒市支行营业室'
        },
        {
          id: 2,
          name: '芒市团结支行'
        },
        {
          id: 3,
          name: '芒市支行城关分理处'
        },
        {
          id: 4,
          name: '芒市支行青年分理处'
        },
        {
          id: 5,
          name: '芒市支行珠宝小镇分理处'
        },
        {
          id: 6,
          name: '芒市支行勐焕分理处'
        },
        {
          id: 7,
          name: '芒市支行华丰分理处'
        },
        {
          id: 8,
          name: '芒市支行遮放分理处'
        }
      ],
      trendData: {
        type: 'line',
        labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        datasets: [
          {
            label: '优秀',
            backgroundColor: '#91C7AE',
            borderColor: '#91C7AE',
            data: [40, 39, 10, 40, 39, 80, 40, 34, 35, 21, 77, 21, 12, 11],
            fill: false,
            pointRadius: 10,
            pointHoverRadius: 5
          },
          {
            label: '良好',
            backgroundColor: '#61A0A8',
            borderColor: '#61A0A8',
            data: [10, 29, 30, 34, 28, 8, 70, 23, 89, 65, 67, 45, 78, 76],
            fill: false,
            pointRadius: 10,
            pointHoverRadius: 5
          },
          {
            label: '一般',
            backgroundColor: '#2F4545',
            borderColor: '#2F4545',
            data: [50, 53, 19, 65, 63, 34, 49, 90, 75, 89, 24, 56, 43, 18],
            fill: false,
            pointRadius: 10,
            pointHoverRadius: 5
          },
          {
            label: '关注',
            backgroundColor: '#D48265',
            borderColor: '#D48265',
            data: [32, 43, 53, 22, 87, 23, 49, 83, 32, 57, 84, 34, 45, 23],
            fill: false,
            pointRadius: 10,
            pointHoverRadius: 5
          },
          {
            label: '重点关注',
            backgroundColor: '#C23531',
            borderColor: '#C23531',
            data: [40, 39, 10, 40, 39, 80, 40, 34, 35, 21, 77, 21, 12, 11],
            fill: false,
            pointRadius: 10,
            pointHoverRadius: 5
          }
        ],
        fill: false
      },
      trendLineOptions: {
        title: {
          display: true,
          text: '客户画像五级分类趋势图'
        },
        responsive: true,
        maintainAspectRatio: false
      }
    }
  },
  mounted () {
    //
  },
  methods: {
    pieClicked () {
    },
    handleSearch1 (value) {
      this.searchData = !value ? [] : [
        value,
        value + value,
        value + value + value
      ]
    }
  }
}
</script>

<style lang="less">
.count-style {
  font-size: 50px;
}
</style>
